<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>

<div id="app_s_1">
<!--    用来监听属性值变化-->
    <p style="font-size: 25px">计数器:{{counter}}</p>
    <button @click="counter++" style="font-size: 25px">点我</button>
</div>
<br/>
<div id="computed_props">
    千米：<input type="number" v-model="kilometers">
    米：<input type="number" v-model="meters">
    <p id="info"></p>
</div>

<script>
    let v = new Vue({
        el: '#app_s_1',
        data: {
            counter: 0
        }
    });
    v.$watch('counter', function (nv, oval) {
        console.log(nv + "::" + oval);
    })

    let computed = new Vue({
        el: '#computed_props',
        data: {
            kilometers: 0,
            meters: 0
        },
        watch: {
            kilometers: function (val) {
                this.kilometers = val;
                this.meters = val * 1000;
            },
            meters: function (val) {
                this.meters = val;
                this.kilometers = val/1000;
            }
        }
    });
    computed.$watch('kilometers', function(newValue, oldValue){
        document.getElementById("info").innerHTML = "修改之前："+newValue+",修改值后："+oldValue;
    })
</script>

</body>
</html>